$(function () {
    // ---------------  创建剪裁区 ------------------
    // - 找到剪裁区的图片 （img#image）
    let $image = $('#image');
    // - 设置配置项
    let option = {
        // 纵横比(宽高比)
        aspectRatio: 1, // 正方形
        // 指定预览区域
        preview: '.img-preview' // 指定预览区的类名（选择器）
    };
    // - 调用cropper方法，创建剪裁区
    $image.cropper(option);

    //2.点击按钮，弹窗选择图片
    $('#chooseImageBtn').on('click', function () {
        $('#chooseImageInp').click()
    })

    let layer = layui.layer
    //3.选择图片，渲染到页面
    $('#chooseImageInp').on('change', function (e) {
        //change事件，只有value发生改变时，才会触发事件
        // console.log(this.value); 
        //1.获取文件对象
        let file = this.files[0]
        // console.log(file);
        // 非空(file是个数组，数组不存在的是undefined)
        if (file === undefined) {
            return layer.msg('上传头像不能为空！')
        }
        //根据文件对象，生成路径
        let url = URL.createObjectURL(file) //dom自带方法生成假路径
        // console.log(url);
        //给浏览图片区域赋值
        $image
            .cropper('destroy') //先销毁，在设置，最后渲染
            .attr('src', url)
            .cropper(option) //重新渲染
    })

    //4.点击确认按钮，修改头像
    $('#uploadBtn').on('click', function () {
        //把裁剪区域的图片转换为base64格式的字符串
        let dataURL = $image
            .cropper('getCroppedCanvas', { //创建一个Canvas画布
                width: 100,
                height: 100
            })
            .toDataURL('image/png') //将Canvas画布上的内容，转化成base64格式
        // console.log(dataURL);
        //发送ajax-写到点击事件里面
        axios({
            method: 'post',
            url: '/my/update/avatar',
            //我们要自己拼接这种：a=1&b=2&c=3
            //注意：只编辑dataURL,不编辑前面的属性和等号
            data: 'avater=' + encodeURIComponent(dataURL)
        }).then((res) => {
            console.log(res);
            if (res.data.status != 0) {
                return layer.msg(res.data.message)
            }
            //成功提示 并且渲染
            layer.msg('恭喜您，头像上传成功！')
            //调用父亲的getUserInfo()
            window.parent.getUserInfo()
        })
    })
})